<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义标签应用示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e40af',
                        secondary: '#64748b',
                        light: '#f1f5f9',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .section-divider {
                @apply border-t border-gray-200 my-8;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 页面头部：包含网站标题和导航 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h1 class="text-2xl font-bold text-primary">
                        <i class="fa fa-code mr-2"></i>Web技术博客
                    </h1>
                    <p class="text-gray-600 mt-1">分享前端开发的知识与经验</p>
                </div>
                
                <!-- 导航栏 -->
                <nav class="w-full md:w-auto">
                    <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
                        <li><a href="#" class="text-gray-700 hover:text-primary transition"><i class="fa fa-home mr-1"></i>首页</a></li>
                        <li><a href="#" class="text-gray-700 hover:text-primary transition"><i class="fa fa-file-text mr-1"></i>文章</a></li>
                        <li><a href="#" class="text-gray-700 hover:text-primary transition"><i class="fa fa-tags mr-1"></i>分类</a></li>
                        <li><a href="#" class="text-gray-700 hover:text-primary transition"><i class="fa fa-user mr-1"></i>关于</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 文章内容区 -->
            <article class="lg:w-2/3 bg-white rounded-lg shadow-md overflow-hidden">
                <div class="relative">
                    <img src="https://picsum.photos/seed/html5/1200/400" alt="HTML5语义标签相关图片" class="w-full h-64 object-cover">
                    <div class="absolute top-4 left-4 bg-primary text-white px-3 py-1 rounded-full text-sm">
                        HTML5
                    </div>
                </div>
                
                <div class="p-6">
                    <header class="mb-6">
                        <h2 class="text-2xl md:text-3xl font-bold mb-3">HTML5语义化标签详解与实践</h2>
                        <div class="flex items-center text-gray-600 text-sm">
                            <span class="flex items-center mr-4">
                                <i class="fa fa-user mr-1"></i> 作者: 前端开发者
                            </span>
                            <span class="flex items-center mr-4">
                                <i class="fa fa-calendar mr-1"></i> 发布: 2023-10-15
                            </span>
                            <span class="flex items-center">
                                <i class="fa fa-eye mr-1"></i> 阅读: 1254
                            </span>
                        </div>
                    </header>
                    
                    <section class="mb-6">
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">什么是HTML5语义标签？</h3>
                        <p class="mb-4 text-gray-700 leading-relaxed">
                            HTML5语义标签是指那些能够清晰描述其包含内容含义的标签。与传统的div标签相比，语义标签不仅能让浏览器更好地理解页面结构，
                            还能提高代码的可读性，有助于搜索引擎优化(SEO)和无障碍访问。
                        </p>
                        <p class="text-gray-700 leading-relaxed">
                            在HTML5之前，开发者通常使用大量的div标签并通过class命名来区分不同的内容块，如&lt;div class="header"&gt;、&lt;div class="footer"&gt;等。
                            HTML5引入了一系列语义标签，使这些结构更加清晰明确。
                        </p>
                    </section>
                    
                    <div class="section-divider"></div>
                    
                    <section class="mb-6">
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">常用的HTML5语义标签</h3>
                        <div class="bg-light p-5 rounded-lg mb-4">
                            <ul class="space-y-2">
                                <li class="flex items-start">
                                    <code class="bg-white px-2 py-1 rounded text-primary mr-2 mt-0.5">header</code>
                                    <span>定义文档的头部区域，通常包含标题、logo和导航等</span>
                                </li>
                                <li class="flex items-start">
                                    <code class="bg-white px-2 py-1 rounded text-primary mr-2 mt-0.5">nav</code>
                                    <span>定义导航链接的容器</span>
                                </li>
                                <li class="flex items-start">
                                    <code class="bg-white px-2 py-1 rounded text-primary mr-2 mt-0.5">main</code>
                                    <span>定义文档的主要内容区域，一个页面通常只有一个main</span>
                                </li>
                                <li class="flex items-start">
                                    <code class="bg-white px-2 py-1 rounded text-primary mr-2 mt-0.5">article</code>
                                    <span>定义独立的、完整的内容块，如文章、博客、评论等</span>
                                </li>
                                <li class="flex items-start">
                                    <code class="bg-white px-2 py-1 rounded text-primary mr-2 mt-0.5">section</code>
                                    <span>定义文档中的节或段落，通常包含一个标题</span>
                                </li>
                                <li class="flex items-start">
                                    <code class="bg-white px-2 py-1 rounded text-primary mr-2 mt-0.5">aside</code>
                                    <span>定义与主要内容相关的辅助内容，如侧边栏、引用等</span>
                                </li>
                                <li class="flex items-start">
                                    <code class="bg-white px-2 py-1 rounded text-primary mr-2 mt-0.5">footer</code>
                                    <span>定义文档的底部区域，通常包含版权信息、联系方式等</span>
                                </li>
                            </ul>
                        </div>
                    </section>
                    
                    <div class="section-divider"></div>
                    
                    <section>
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">语义标签的优势</h3>
                        <ol class="list-decimal pl-5 space-y-2 text-gray-700">
                            <li>提高代码的可读性和可维护性</li>
                            <li>有助于搜索引擎更好地理解页面内容，提升SEO效果</li>
                            <li>改善无障碍访问，帮助屏幕阅读器正确解析页面结构</li>
                            <li>减少对class和id的依赖，使HTML结构更简洁</li>
                            <li>便于团队协作，统一的标签含义使代码风格更一致</li>
                        </ol>
                    </section>
                    
                    <div class="section-divider"></div>
                    
                    <!-- 文章评论区 -->
                    <section>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">评论区</h3>
                        <div class="space-y-4">
                            <article class="p-4 bg-light rounded-lg">
                                <header class="flex items-center mb-2">
                                    <img src="https://picsum.photos/seed/user1/50/50" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                                    <div>
                                        <h4 class="font-medium">张小明</h4>
                                        <p class="text-xs text-gray-500">2天前</p>
                                    </div>
                                </header>
                                <p class="text-gray-700 text-sm">非常实用的文章，终于搞清楚了这些语义标签的正确用法，感谢分享！</p>
                            </article>
                            
                            <article class="p-4 bg-light rounded-lg">
                                <header class="flex items-center mb-2">
                                    <img src="https://picsum.photos/seed/user2/50/50" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                                    <div>
                                        <h4 class="font-medium">李华</h4>
                                        <p class="text-xs text-gray-500">1周前</p>
                                    </div>
                                </header>
                                <p class="text-gray-700 text-sm">请问section和article的使用场景有什么主要区别呢？有时候不太好区分。</p>
                            </article>
                        </div>
                    </section>
                </div>
            </article>
            
            <!-- 侧边栏 -->
            <aside class="lg:w-1/3 space-y-6">
                <!-- 作者信息 -->
                <div class="bg-white rounded-lg shadow-md p-5">
                    <h3 class="text-lg font-semibold mb-4 border-b pb-2">关于作者</h3>
                    <div class="flex items-center mb-3">
                        <img src="https://picsum.photos/seed/author/80/80" alt="作者头像" class="w-16 h-16 rounded-full mr-4">
                        <div>
                            <h4 class="font-medium">前端开发者</h4>
                            <p class="text-sm text-gray-600">5年Web开发经验</p>
                        </div>
                    </div>
                    <p class="text-sm text-gray-700">
                        专注于前端技术分享，包括HTML5、CSS3、JavaScript等Web开发相关知识。
                    </p>
                </div>
                
                <!-- 热门文章 -->
                <div class="bg-white rounded-lg shadow-md p-5">
                    <h3 class="text-lg font-semibold mb-4 border-b pb-2">热门文章</h3>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/seed/post1/100/80" alt="CSS布局技巧" class="w-20 h-20 object-cover rounded mr-3">
                                <div>
                                    <h4 class="text-sm font-medium group-hover:text-primary transition">CSS布局技巧：从Flex到Grid</h4>
                                    <p class="text-xs text-gray-500 mt-1">2023-09-28</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/seed/post2/100/80" alt="JavaScript性能优化" class="w-20 h-20 object-cover rounded mr-3">
                                <div>
                                    <h4 class="text-sm font-medium group-hover:text-primary transition">JavaScript性能优化实践</h4>
                                    <p class="text-xs text-gray-500 mt-1">2023-09-15</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex group">
                                <img src="https://picsum.photos/seed/post3/100/80" alt="响应式设计" class="w-20 h-20 object-cover rounded mr-3">
                                <div>
                                    <h4 class="text-sm font-medium group-hover:text-primary transition">现代响应式设计指南</h4>
                                    <p class="text-xs text-gray-500 mt-1">2023-08-30</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <!-- 分类标签 -->
                <div class="bg-white rounded-lg shadow-md p-5">
                    <h3 class="text-lg font-semibold mb-4 border-b pb-2">文章分类</h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="#" class="px-3 py-1 bg-light text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition">HTML5</a>
                        <a href="#" class="px-3 py-1 bg-light text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition">CSS3</a>
                        <a href="#" class="px-3 py-1 bg-light text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition">JavaScript</a>
                        <a href="#" class="px-3 py-1 bg-light text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition">响应式设计</a>
                        <a href="#" class="px-3 py-1 bg-light text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition">前端框架</a>
                        <a href="#" class="px-3 py-1 bg-light text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition">性能优化</a>
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-12">
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">Web技术博客</h3>
                    <p class="text-gray-400 text-sm">
                        分享前端开发的知识与经验，助力开发者成长。
                    </p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="#" class="hover:text-white transition">首页</a></li>
                        <li><a href="#" class="hover:text-white transition">最新文章</a></li>
                        <li><a href="#" class="hover:text-white transition">热门教程</a></li>
                        <li><a href="#" class="hover:text-white transition">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <div class="flex space-x-4 text-gray-400">
                        <a href="#" class="hover:text-white transition"><i class="fa fa-github text-xl"></i></a>
                        <a href="#" class="hover:text-white transition"><i class="fa fa-twitter text-xl"></i></a>
                        <a href="#" class="hover:text-white transition"><i class="fa fa-linkedin text-xl"></i></a>
                        <a href="#" class="hover:text-white transition"><i class="fa fa-envelope text-xl"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
                &copy; 2023 Web技术博客 版权所有
            </div>
        </div>
    </footer>
</body>
</html>
    